<template>
    <div>
        <nav-bar class="nav-bar">
            <template v-slot:center>我的主页</template>
            <template v-if="user" v-slot:right>
                <a @click="this.$router.push('/userSz')">{{user.username}}</a>
                <i style="width: 10px" class="el-icon-s-tools"></i>
            </template>
            <template v-else v-slot:right >
                <div @click="this.$router.push('/login')">点击登录</div>
            </template>
        </nav-bar>
        <div style="height: 40px;width: 98%"></div>
        <div class="box" v-for="item in myGoodsData">
            <div class="item" v-if="item.author == user.username">
                <div class="item" @click="lookup(item)">
<!--                    <div style="width: 60px"><img :src="item.img" style="width: 50px"/></div>-->
                    <div style="flex: 1"><h3>{{item.name}}</h3><div style="min-height:20px">{{item.property}}</div></div>
                    <div style="width: 70px">价格：{{item.price}}</div>
                    <div style="width: 50px">{{item.priceUnit}}</div>
                </div>
                <div style="width: 50px">
                    <el-popconfirm title="确认删除吗？" @confirm="handleDelete(item.id)">
                        <template #reference>
                            <el-button link type="primary" >删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </div>
        </div>
        <div style="height: 50px;width: 98%"></div>
    </div>
</template>

<script>
    import NavBar from "../../components/common/navbar/NavBar";
    import request from "../../network/request";
    export default {
        name: "profile",
        components: {NavBar},
        data(){
            return{
                pageSize:'100',
                myGoodsData:[],
                user: JSON.parse(sessionStorage.getItem("user"))
            }
        },
        created(){
            if (this.user){
                this.load()
            }
        },
        methods:{
            load(){
                request.get("/goods/userGoods",{
                    params:{
                        pageNum:this.currentPage,
                        pageSize:this.pageSize,
                        search:this.user.username,
                    }
                }).then(res => {
                    this.myGoodsData = res.data.records
                    this.total = res.data.total
                })
            },
            handleDelete(id){
                request.delete("/goods/" + id).then(res => {
                    if (res.code === '0'){
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load()
                })
            },
            lookup(item){
                this.$router.push({
                        path:'/goodsDetails',
                        query: {
                            data: [item.name,
                                item.price,
                                item.img,
                                item.fwq,
                                item.address,
                                item.priceUnit,
                                item.number,
                                item.author,
                                item.property,
                                item.bsProperty]
                        }
                    }
                )
            }
        }
    }
</script>

<style scoped>
    .nav-bar{
        background-color: white;
        box-shadow: 0 1px 1px rgba(100,100,100,.1);
        position: fixed;z-index: 1;width: 100%;
    }
    .item{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex: 1;
        margin-top: 10px;
        background-color: #f6f6f6;
    }
</style>